<template>
  <div class="page">
    <div class="card all" ref="card">
      <LabelBox>
        <span slot="left">Sound Portal</span>
      </LabelBox>
      <div class="portalBox">
        <el-scrollbar class="height lastP">
          <p v-for="(warn, index) in warnList" :key="index">
            Overview
            <span>{{ warnTitleList[index] }}</span>
            <strong style="margin-left:10px">{{ warn }}</strong>
          </p>
        </el-scrollbar>
      </div>
      <p class="errorMsg">All this data is also confidential (Also the table!),it is not allowed to share it with the customer!</p>
      <div>
        <span>项目类型：</span>
        <el-select v-model="typeParent" placeholder="请选择" @change="getTypeData">
          <el-option v-for="(type, index) in parentList" :label="type.typeName" :value="type.typeCode" :key="index"> </el-option>
        </el-select>
        <span>项目明细：</span>
        <el-select v-model="typeCode" placeholder="请选择">
          <el-option v-for="(type, index) in typeList" :label="type.typeName" :value="type.typeCode" :key="index"> </el-option>
        </el-select>
        <span>条码号：</span>
        <el-input v-model="serialNo" placeholder="请输入" style="width:200px"></el-input>
        <el-button type="primary" @click="getDate" style="margin-left:20px">查询</el-button>
      </div>
      <el-table border :data="tableList" :height="tableHieght + 'px'" stripe @row-click="rowClick">
        <el-table-column style="text-align: center" prop="datetime" label="Datetime" width="200px"> </el-table-column>
        <el-table-column style="text-align: center" prop="lineno" label="LineNo"> </el-table-column>
        <el-table-column style="text-align: center" prop="stationno" label="StationNo" width="100px"> </el-table-column>
        <el-table-column style="text-align: center" prop="adjuster" label="Adjuster" width="100px"> </el-table-column>
        <el-table-column style="text-align: center" prop="wpc" label="WPC"> </el-table-column>
        <el-table-column style="text-align: center" prop="serialno" label="ProdNo" width="120px"> </el-table-column>
        <el-table-column style="text-align: center" prop="MorSQL" label="MorSQL"> </el-table-column>
        <el-table-column style="text-align: center" prop="sap" label="SAP" width="120px"> </el-table-column>
        <el-table-column style="text-align: center" prop="directionstr" label="Direction" width="100px"> </el-table-column>
        <el-table-column style="text-align: center" prop="failedanalysiscount" label="Countfailed"> </el-table-column>
        <el-table-column style="text-align: center" label="Process">
          <template slot-scope="scope">
            <span v-if="scope.row.processok == true" style="color: green">√</span>
            <span v-else-if="scope.row.processok == false" style="color: red">X</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column style="text-align: center" label="Subjective">
          <template slot-scope="scope">
            <span v-if="scope.row.subjectiveresult == true" style="color: green">√</span>
            <span v-else-if="scope.row.subjectiveresult == false" style="color: red">X</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column style="text-align: center" label="Voltage">
          <template slot-scope="scope">
            <span v-if="scope.row.resultVoltage == true" style="color: green">√</span>
            <span v-else-if="scope.row.resultVoltage == false" style="color: red">X</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column style="text-align: center" label="Current">
          <template slot-scope="scope">
            <span v-if="scope.row.resultCurrent == true" style="color: green">√</span>
            <span v-else-if="scope.row.resultCurrent == false" style="color: red">X</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column style="text-align: center" label="Memo">
          <template slot-scope="scope">
            <span v-if="scope.row.resultMemo == true" style="color: green">√</span>
            <span v-else-if="scope.row.resultMemo == false" style="color: red">X</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column style="text-align: center" label="Rpm">
          <template slot-scope="scope">
            <span v-if="scope.row.resultRpm == true" style="color: green">√</span>
            <span v-else-if="scope.row.resultRpm == false" style="color: red">X</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column style="text-align: center" label="Sound">
          <template slot-scope="scope">
            <span v-if="scope.row.resultSound == true" style="color: green">√</span>
            <span v-else-if="scope.row.resultSound == false" style="color: red">X</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column style="text-align: center" prop="wave" label="Wave" width="500px"> </el-table-column>
      </el-table>
      <!-- <el-pagination style="float:right;margin-top:10px" @size-change="getDate" @current-change="getDate" :current-page.sync="pageNum" :page-sizes="[100, 200, 300, 400]" :page-size.sync="pageSize" layout="total, sizes, prev, pager, next, jumper" :total.sync="total"> </el-pagination> -->
    </div>
  </div>
</template>
<script>
export default {
  name: 'Summary_detail',
  data() {
    return {
      tableHieght: 0,
      pageNum: 1,
      pageSize: 100,
      total: 0,
      //类型选择
      typeParent: '',
      parentList: [],
      typeCode: '',
      typeList: [],
      //编号
      serialNo: '2006040227',
      time: '',
      tableList: [],
      //上方报警数据
      warnList: [],
      warnTitleList: [],
    }
  },
  mounted() {
    this.$nextTick(() => {
      let card = this.$refs.card.offsetHeight || 0 //卡片高度
      this.tableHieght = card - 350
    })
    console.log(this.$route.params.prodCode)
  },
  created() {
    this.getParentType()
  },
  methods: {
    getParentType() {
      this.$http
        .request({
          url: '/api/config/type',
          method: 'GET',
          params: {
            typeParent: 'None',
          },
        })
        .then((resp) => {
          if (resp.status == 100) {
            this.parentList = resp.data
          }
        })
    },
    getTypeData() {
      var self = this
      self.typeCode = ''
      this.$http
        .request({
          url: '/api/config/type',
          method: 'GET',
          params: {
            typeParent: this.typeParent,
          },
        })
        .then((resp) => {
          if (resp.status == 100) {
            this.typeList = resp.data
          }
        })
    },
    getDate() {
      var self = this
      if (this.typeParent == '') {
        this.$message({
          message: '请选择类型！',
          type: 'error',
        })
        return
      }
      if (this.typeCode == '') {
        this.$message({
          message: '请选择项目！',
          type: 'error',
        })
        return
      }
      if (this.serialNo == '') {
        this.$message({
          message: '请输入条码号！',
          type: 'error',
        })
        return
      }
      this.$http
        .request({
          url: '/api/config/path',
          method: 'GET',
          params: {
            typeCode: this.typeCode,
          },
        })
        .then((resp) => {
          if (resp.status == 100) {
            var typeList = resp.data
            if (typeList.length == 0) {
              self.$message({
                message: '类型未配置！',
                type: 'error',
              })
            }
            var path = typeList[0].typePath
            self.tableList = []
            self.warnTitleList = []
            self.warnList = []
            this.$http
              .request({
                url: '/api/data/' + path,
                method: 'GET',
                params: {
                  serialNo: self.serialNo,
                },
              })
              .then((resp) => {
                if (resp.status == 100) {
                  self.tableList = resp.data
                  var regx = /ok$/
                  for (var i = 0; i < self.tableList.length; i++) {
                    var obj = self.tableList[i]
                    var warnString = ''
                    for (var key in obj) {
                      if (regx.test(key) && !obj[key]) {
                        warnString = warnString + key.replace('ok', '') + ','
                      }
                    }
                    if (warnString != '') {
                      self.warnTitleList.push(obj.datetime + ' ' + obj.sap + ' ' + obj.directionstr)
                      self.warnList.push(warnString)
                    }
                  }
                }
              })
          }
        })
    },
    rowClick(row) {
      console.log(row)
    },
  },
}
</script>
<style lang="scss"></style>
